<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <input type="text" class="username"><span></span><br>
  <input type="text" class="password"><span></span><br>
  <input type="text" class="password2"><span></span><br>
  <input type="button" value="提交" class="btn">
</body>
<script>

  var un = document.querySelector(".username");
  var pw = document.querySelector(".password");
  var pw2 = document.querySelector(".password2");
  var btn = document.querySelector(".btn");

  // ○ 用户名验证：数字字母下划线中划线中文，5~10位
  // ○ 密码验证：数字字母特殊字符，6~10位
  // ○ 重复密码验证：与正则无关
  // ○ 手机号验证
  // ○ 邮箱验证
  // ○ 要求：每个输入框，边输入边验证输入框内容，在当前输入框后显示提示语
  // ○ 要求：点击按钮，所有输入框全部正确，提示成功，否则，提示失败

  // 用来记录每个输入框的验证状态，方便将来提交时统一判断
  var unState = false;
  var pwState = false;
  var pw2State = false;

  un.oninput = function(){
    var str = this.value;
    // 验证用户名的正则
    var reg = /^[\w\u2e80-\u9fff-]{5,10}$/;
    // 验证
    if( reg.test(str) ){
      this.nextElementSibling.innerHTML = "ok";
      unState = true;
    }else{
      this.nextElementSibling.innerHTML = "no";
      unState = false;
    }
  }
  
  pw.oninput = function(){
    var a = 0;
    var b = 0;
    var c = 0;

    var str = this.value;
    // 验证密码的正则
    // var reg = /^[\da-z]{6,10}$/i;
    var reg = /^.{6,10}$/i;
    // 验证
    if( !reg.test(str) ){
      this.nextElementSibling.innerHTML = "长度不符";
      pwState = false;
      return;
    }
    pwState = true;

    // 强度验证
    if( /\d/.test(str) ){
      a = 1;
    }
    if( /[a-z]/i.test(str) ){
      b = 1;
    }
    if( /[^\da-z]/i.test(str) ){
      c = 1;
    }
    switch(a+b+c){
      case 1:this.nextElementSibling.innerHTML = "弱";break;
      case 2:this.nextElementSibling.innerHTML = "中";break;
      case 3:this.nextElementSibling.innerHTML = "强";break;
    }

    // 如果重复密码框不为空
    if(pw2.value === "") return;
    // 进行重复密码的判断
    if( this.value === pw2.value ){
      pw2.nextElementSibling.innerHTML = "一致";
      pw2State = true;
    }else{
      pw2.nextElementSibling.innerHTML = "不一致";
      pw2State = false;
    }
  }
  
  pw2.oninput = function(){
    // 进行重复密码的判断
    if( this.value === pw.value ){
      this.nextElementSibling.innerHTML = "一致";
      pw2State = true;
    }else{
      this.nextElementSibling.innerHTML = "不一致";
      pw2State = false;
    }
  }

  btn.onclick = function(){
    // 提交时，验证所有输入框状态，是否全部为true
    if(unState && pwState && pw2State){
      alert("提交成功");
    }else{
      alert("提交失败");
    }
  }


</script>
</html>